<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useServerStore } from '../stores/serverStore'
import { useAuthStore } from '../stores/auth'

const router = useRouter()
const serverStore = useServerStore()
const authStore = useAuthStore()

// 获取服务器数据
onMounted(() => {
  if (!serverStore.servers.length) {
    serverStore.fetchServers()
  }
})

// 最新服务器记录
const latestServers = computed(() => {
  // 按创建时间降序排序，显示最近20条
  return [...serverStore.servers]
    .filter(server => server.createdAt) // 确保有创建时间
    .sort((a, b) => {
      const dateA = a.createdAt ? new Date(a.createdAt).getTime() : 0
      const dateB = b.createdAt ? new Date(b.createdAt).getTime() : 0
      return dateB - dateA
    })
    .slice(0, 20)
})

// 导航到服务器详情
const navigateToServerDetail = (serverId: string) => {
  router.push({ name: 'server-detail', params: { id: serverId } })
}

// 返回主页
const goBack = () => {
  router.push('/')
}
</script>

<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-lg sticky top-0 z-10">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
          <div class="flex">
            <div class="flex-shrink-0 flex items-center">
              <h1 class="text-2xl font-bold text-gray-900">MCP Server <span class="text-blue-600">导航</span></h1>
            </div>
          </div>
          
          <!-- 用户信息 -->
          <div class="flex items-center">
            <div v-if="authStore.isAuthenticated" class="relative ml-3">
              <div class="flex items-center space-x-3">
                <span class="text-gray-700">{{ authStore.user?.username }}</span>
                <button 
                  @click="goBack"
                  class="text-gray-500 hover:text-gray-700 font-medium"
                >
                  返回主页
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </nav>

    <!-- 主要内容 -->
    <main class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <div class="bg-white shadow-md rounded-lg p-6">
        <div class="flex items-center justify-between mb-6">
          <h2 class="text-2xl font-bold text-gray-900">最新提交的服务器</h2>
        </div>
        
        <!-- 加载状态 -->
        <div v-if="serverStore.isLoading" class="flex justify-center my-8">
          <div class="spinner"></div>
        </div>
        
        <!-- 错误提示 -->
        <div v-else-if="serverStore.error" class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 my-4 rounded">
          <p>{{ serverStore.error }}</p>
        </div>
        
        <!-- 无结果提示 -->
        <div v-else-if="latestServers.length === 0" class="text-center py-12">
          <div class="text-5xl mb-4">📊</div>
          <h3 class="text-xl font-medium text-gray-900 mb-2">暂无服务器记录</h3>
          <p class="text-gray-600">尚未有服务器提交记录或记录没有时间信息</p>
        </div>
        
        <!-- 服务器列表 -->
        <div v-else class="space-y-4">
          <div 
            v-for="server in latestServers" 
            :key="server.id"
            @click="navigateToServerDetail(server.id)"
            class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 cursor-pointer transition-colors duration-200"
          >
            <div class="flex items-start justify-between">
              <div class="flex-1">
                <div class="flex items-center">
                  <h3 class="text-lg font-medium text-gray-900">{{ server.name }}</h3>
                  <span
                    :class="[
                      'ml-2 text-xs px-2.5 py-1 rounded-full',
                      server.source === 'huawei' ? 'bg-red-100 text-red-800' : 
                      server.type === 'official' ? 'bg-green-100 text-green-800' : 'bg-blue-100 text-blue-800'
                    ]"
                  >
                    {{ server.source === 'huawei' ? '华为' : 
                       server.type === 'official' ? '官方' : '社区' }}
                  </span>
                </div>
                <p class="mt-1 text-sm text-gray-600">{{ server.description }}</p>
                
                <div class="mt-3 flex flex-wrap gap-1.5">
                  <span
                    v-for="tag in server.tags.slice(0, 5)"
                    :key="tag"
                    class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800"
                  >
                    {{ tag }}
                  </span>
                  <span
                    v-if="server.tags.length > 5"
                    class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800"
                  >
                    +{{ server.tags.length - 5 }}
                  </span>
                </div>
                
                <div class="mt-2 flex items-center text-xs text-gray-500">
                  <span>{{ new Date(server.createdAt!).toLocaleString() }}</span>
                  <span v-if="server.createdBy" class="ml-3">由 {{ server.createdBy }} 提交</span>
                </div>
              </div>
              
              <div class="ml-4 text-gray-400">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    
    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-8 mt-12">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col md:flex-row justify-between items-center">
          <div class="mb-4 md:mb-0">
            <h2 class="text-xl font-bold">MCP Server 导航</h2>
            <p class="text-gray-400">Model Context Protocol 服务器资源集合</p>
          </div>
          <div class="flex space-x-4">
            <a href="https://mcp.so" target="_blank" class="text-gray-300 hover:text-white">
              官方网站
            </a>
            <a href="https://github.com" target="_blank" class="text-gray-300 hover:text-white">
              GitHub
            </a>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<style scoped>
.spinner {
  @apply animate-spin rounded-full h-12 w-12 border-t-4 border-b-4 border-blue-500;
}
</style> 